import { useState, useEffect } from "react";
import { Form, message, Select, Input, InputNumber } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { updateSortingWall, addSortingWall } from "../service";
import { LETTER_LIST } from "@/views/utils/constant";
import Style from "./index.module.less";

import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import WarehouseSelect from "@/views/components/WarehouseSelect";
const AddSortWallModal = ({ visible, fetchList, handleCancel, data }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const { id } = data;

	const [selectedWarehouse, setSelectedWarehouse] = useState(null);
	const [selectedWarehouseName, setSelectedWarehouseName] = useState(null);
	const handleWarehouseChange = (value, name) => {
		setSelectedWarehouse(value);
		setSelectedWarehouseName(name.warehouseName);
	};
	const handleNumChange = (e, num) => {
		const reg = /^[1-9]\d*$/;
		const val = e.target.value;
		if (reg.test(val)) {
			if (num == 1) {
				form.setFieldValue("rowQty", val);
			} else {
				form.setFieldValue("columnQty", val);
			}
		} else {
			message.info("请输入正整数");
		}
	};
	useEffect(() => {
		if (data) {
			form.setFieldValue("name", data.name);
			form.setFieldValue("capacity", data.capacity);
			form.setFieldValue("warehouseId", data.warehouseId);
			form.setFieldValue("columnQty", data.columnQty);
			form.setFieldValue("rowQty", data.rowQty);
			form.setFieldValue("warehouseName", data.warehouseName);
		} else {
			if (visible) {
				form.resetFields();
			}
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
			if (data.id) {
				const { success } = await updateSortingWall({
					id: data.id,
					capacity: value.capacity,
					columnQty: value.columnQty,
					name: value.name,
					warehouseId: value.warehouseId,
					warehouseName: selectedWarehouseName ? selectedWarehouseName : value.warehouseName,
					rowQty: value.rowQty
				});
				if (success) {
					message.success("编辑成功");
					onCancel();
					fetchList();
				}
			} else {
				console.log(value, selectedWarehouseName, '1231')
				const { success } = await addSortingWall({
					capacity: value.capacity,
					columnQty: value.columnQty,
					name: value.name,
					warehouseId: value.warehouseId,
					warehouseName: selectedWarehouseName,
					rowQty: value.rowQty
				});
				if (success) {
					message.success("新增成功");
					onCancel();
					fetchList();
				}
			}

			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const WarehouseSelectProps = {
		size: 15
	};
	return (
		<CommonModal
			title={{ title: id ? "编码分拣墙" : "新增分拣墙" }}
			visible={true}
			onOk={onOk}
			width={"588px"}
			onCancel={onCancel}
			minHeight="150px"
		>
			<SubTitle symbol as="s2" title={`设置分拣墙`} wrapStyle={{ marginBottom: 16 }} />
			<Form form={form} name="stock-set-remark-modal" style={{ marginLeft: 16 }}>
				<Form.Item name="warehouseId" label="">
					<WarehouseSelect
						placeholder={"所属仓库"}
						value={selectedWarehouse}
						name={selectedWarehouseName}
						{...WarehouseSelectProps}
						onChange={handleWarehouseChange}
					/>
				</Form.Item>
				<Form.Item name="warehouseName" label="" hidden></Form.Item>
				<Form.Item name="name" label="" rules={[{ required: true, message: "请选择分拣墙" }]}>
					<Select size={15} placeholder="请选择分拣墙" aria-required disabled={id} options={LETTER_LIST} />
				</Form.Item>
				<Form.Item name="rowQty" label="" rules={[{ required: true, message: "请输入排数" }]}>
					<InputNumber size={15} placeholder="请输入排数" min={1} max={100} aria-required onBlur={e => handleNumChange(e, 1)} />
				</Form.Item>
				<Form.Item name="columnQty" label="" rules={[{ required: true, message: "请输入列数" }]}>
					<InputNumber
						style={{ background: "#f7f8fc" }}
						placeholder="请输入列数"
						min={1}
						size={15}
						max={100}
						aria-required
						onBlur={e => handleNumChange(e, 2)}
					/>
				</Form.Item>
			</Form>
		</CommonModal>
	);
};

export default AddSortWallModal;
